<template>
  <div class="fans-page">
     <el-card class="box-card">
      <div slot="header" class="clearfix">
        <crumbs>粉丝管理</crumbs>
      </div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="粉丝列表" name="fanList">
          <ul class="item-list">
            <li v-for="item in fanList" :key="item.id">
              <el-avatar :size="80" :src="item.photo" @error="errorHandler">
                <img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
              </el-avatar>
              <p>{{ item.name }}</p>
              <el-button type="primary" size="small" plain >+关注</el-button>
            </li>
          </ul>
          <!-- 分页 -->
          <el-pagination
            style="margin-top: 20px"
            background
            @current-change="changePage"
            :current-page="reqParams.page"
            layout="total, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="粉丝画像" name="fanImg">
          <div ref="main" style="width: 600px; height:400px;"></div>
        </el-tab-pane>
      </el-tabs>
     </el-card>
  </div>
</template>

<script>
import { fans as fansList } from '@/api/user'
// 引入echars
const echarts = require('echarts')
export default {
  name: 'Fans',
  data () {
    return {
      activeName: 'fanList',
      circleUrl: '',
      reqParams: {
        page: 1,
        per_page: 20
      },
      total: 0,
      // 粉丝列表
      fanList: []
    }
  },
  mounted () {
    this.getFansList()
  },
  methods: {
    // 头像图片错误处理
    errorHandler () {
      return true
    },
    // 获取粉丝列表
    async getFansList () {
      const { data: { data } } = await fansList(this.reqParams)
      this.fanList = data.results
      this.total = data.total_count
    },
    // 分页跳转
    changePage (curPage) {
      this.reqParams.page = curPage
      this.getFansList()
    },
    // 点击粉丝画像的时候,调用echars图表
    handleClick () {
      this.employEchars()
    },
    // 使用 echars
    employEchars () {
      const myChart = echarts.init(this.$refs.main)
      const option = {
        color: ['#3398DB'],
        xAxis: {
          type: 'category',
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: [],
          type: 'bar'
        }]
      }
      // 接口错误模拟数据
      const data = [
        { name: '20岁以下', count: 100 },
        { name: '20-30岁', count: 300 },
        { name: '30-40岁', count: 400 },
        { name: '40-50岁', count: 200 },
        { name: '50岁以上', count: 100 }
      ]
      data.forEach(item => {
        option.xAxis.data.push(item.name)
        option.series[0].data.push(item.count)
      })

      myChart.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped>
.item-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  li {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 120px;
    height: 160px;
    border: 1px dashed #ddd;
    padding: 10px 0;
    margin: 0 20px 20px 0;
  }
}
</style>
